How To Create a Home Page

This is a step by step guide on how to create your first page with PageSpinner. This guide is also included in the PageSpinner AppleGuide, available in the Help menu if AppleGuide is installed.

How do I use the HTML Assistant?

What to do next

When you have created your first page using the 6 steps above and used the HTML Assistant, you can do the following to learn more about PageSpinner and HTML:

Use the PageSpinner AppleGuide. The Guide contains information about many more topics and contains interactive coach marks displayed on the screen to let you learn more about WWW and how to spin your pages with PageSpinner.
Check out the New... dialog in the File menu to create different types of pages using the built-in templates.
Try the HTML Examples available in the Windows menu.
Read the Beginner's Guide to HTML (a bookmark is available in the Help menu). The Beginner's Guide to HTML was one of the first introductions to HTML, and the updated version is one of the finest introductions to HTML that's available on the net.
Use Ballon help in HTML Assistant to learn about the options that are available in the topics.
Check out the Examples folder in the PageSpinner folder. You can view the index of the examples in your browser by selecting the menu item More Examples in the Help menu.
If you need an HTML reference you could try the shareware HTML Vocabulary, you can launch this or view information about it in PageSpinner's Help menu.

Learn the basics about HTML
Before you begin you will have to understand the basics of HTML.
A HTML Page is a text file that is structured by HyperText Markup Tags. A tag is just some text that is enclosed by <>, eg <BODY>.

Many tags consists of a start tag and a matching end tag, eg <BODY>....some text... </BODY>. The end tag has the same name as the start tag but contains a / before the actual name.

The HTML standard specifies the names of the tags and what effect they will have when the page is rendered by a HTML browser.

An HTML Page is a text file that at least contains the following tags:

All contents in the page should be located between the <HTML> and </HTML> tag. Inside the HTML tag you should always have a HEAD tag section and a BODY tag section.

HEAD
Inside the HEAD tag you supply general information about the document such as the title of the document. This title is displayed in the browsers window title when you view the page. JavaScripts are also usually placed inside the HEAD tag.
<HEAD> <TITLE>My Home Page!</TITLE>
</HEAD>
You should not place any text inside the HEAD section.

BODY

Inside the BODY tag you enter the contents you would like to display on your HTML page.

How Do I Create a Home Page?
OK, it is now time create your own Home Page.
Do This:

Select New... in the File menu.
Select Empty Page in the list of different pages in the New... dialog that is displayed.

NOTE: You may later use the other options in the list in this New... dialog to create a specific type of page.

Enter the title of the page in the Title field.

If you wish, you can also select colors for the text, background and links on your page in the Color box by clicking in the color boxes.

Click on the New button.

The skeleton of an empty HTML page is now created and is open in a new untitled window.

Position the cursor between the start and end <BODY> tag by clicking on the empty line.

Enter any text you would like to be displayed on your home page between the start and end BODY tag.

You can also Paste or Drag and drop text from other applications.

When you are done creating some of the text you want to be displayed on your page, you could view it with your Web browser.

How do I preview a HTML page?
Your document must have been saved to disk before you can preview the page in a browser.

Save your file to disk by using the Save Command in the File menu.

Only use characters between a-z and 0-9 when you name the file, because these are the only one characters supported by all HTTP Servers on all platforms.

You should also end the name of the file with .html to indicate that it is a file containing HTML tags.

Example:
homepage.html

Click on the Preview button in the windows toolbar to to view it in the browser:

You may optionally use the Preview menu item in the File menu.

This command is available in the menu File:Save and Preview
If the browser doesn't launch, you may have to specify the application to use for browsing in the Browser... item in the Preferences Menu.
This command is available in the menu File:Prefs:Browser...

HTML line breaks
When you previewed your page in the Browser you might have found that all the line breaks you used to format your text were missing. The text just flowed like a very long paragraph.
This happens because HTML ignores any standard Macintosh line breaks you put in your text. It also ignores any tabs and multiple spaces in the text.

To force the text to start on a new line or in a new paragraph you will need to insert one of the the following special HTML tags:

Line break  
Paragraph 
Horizontal Line <HR>

Line break  

Insert the   tag to force the following text to start on a new line.
This tag is available in the menu Tags:Line Break

Paragraph 

Insert the  tag to force the following text to start in a new paragraph. Paragraphs are usually displayed with a blank line inserted between them. The paragraph tag may optionally have an end of paragraph tag  efter the text in the paragraph.
This tag is available in the menu Tags:Paragraph

Horizontal Line <HR>
Insert the <HR> tag to force a horizontal ruler to be displayed between the paragraphs. This tag may optionally have some attributes inside it, e. g. for specifying the width or the height of the line. Use the HTML Assistant to specify any options for the <HR> tag.
This tag is available in the menu Tags:Horizontal Line...

Since these tags are very common when typing text, PageSpinner has the following keyboard shortcuts for typing them:

Do this:
Add any necessery Line Break tags in the text in your Home Page.

Adding a link to another page
A link inside your HTML page gives the user the option to load and view the contents in another file just by selecting the link. We will now add a link to PageSpinner's Home Page on the Web.

Do This:
Enter the following text somewere inside the BODY section of your HTML page:
This page was created with PageSpinner.
Select the word "PageSpinner" by double clicking on it. This word will be used as the link.

Select Link in the HTML Assistant Menu in the Menu.
The Link dialog is now being displayed in the HTML Assistant Window.
The text you selected is displayed in the "Text:" field. You may modify this text if you need to.

Type the following text in the field
"Enter URL or named anchor to link to":
http://www.algonet.se/~optima/pagespinner.html
This is the address (URL) of PageSpinner's Home Page.

Click the Apply button to apply the link tags on the selected text in your document.

The HTML tags that specify a link should be inserted surrounding the text "PageSpinner". All text between the <A HREF=...> and </A> tags will act as a link to the specified page.

Click on the Preview button in the Toolbar to preview your page.

If you are connected to the Internet and the server at www.algonet.se is working you should be able to go to PageSpinner's Home by selecting the link in your own Home Page.

Transfer HTML files to a HTTP Server
Your HTML files can be transferred to a HTTP Server by the use of one of the following popular protocols:
FTP
Email
AppleShare
NFS
TELNET terminal connection and a file transfer protocol such as: ZModem, XModem or Kermit

Contact your Internet provider or local Webmaster for further information.

You should set your transfer application to use ASCII or TEXT when transferring HTML files created with PageSpinner or other HTML editors.
To transfer images, audio or video files you need to transfer these as Binary files (and not MacBinary).
You should only use the format MacBinary when you are uploading compressed Macintosh files (e. g. compressed .sit-archive files). Such files can most often only be downloaded with a MacOS based computer.

If you are saving files in the ISO 8859-1 format (default) and use Fetch to upload the files, you will need to select "Customize:Misc" in Fetch and uncheck "Translate ISO characters" to have international characters transferred correctly.
Also make sure you don't have MacBinary II enabled when transferring Text or Image files. The recommended setting to use with Fetch 3.0.1 "Customize:Preferences:Upload" is:
Default text format: TEXT Default non-text format: Raw Data

Tip

If you are using PREFORMATTED text in your HTML file: <PRE> ..TEXT...</PRE> and don't save the file with Unix Line Feeds, you should tell your file transfer application to add CR/LF after each line.

If you have FTP access to the Web directory, you can use PageSpinner's Save to FTP server menu item to tell a scriptable transfer application to transfer a page to a specified server.
A compiled AppleScript is included that tells the application Fetch to upload the current file.
We will now take a look at how you can use PageSpinner's Save to FTP server command.
Do this:
Select the FTP Server option in the preferences to specify the URL and password for the server.
This command is available in the menu File:Preferences:FTP Server
Select Save to FTP Server to save the current file on the ftp server.
If you need to change directory on the server before saving a file, press the Option key when selecting Save to FTP Server to edit the preferences.
This command is available in the menu File:Save to FTP Server
Read the file Save To FTP Server Info in the folder Settings : FTP for additional information about saving to a FTP server.

How do I use the HTML Assistant?
PageSpinner uses the HTML Assistant Window instead of modal dialogs to give you a more flexible way of creating and maintaining your HTML pages.
The HTML Assistant is displayed in a non modal dialog that allows you to switch between different documents windows and other applications.

Do this:
Select the text in your document that you would like to format using HTML tags.
Bring the HTML Assistant Window to front by selecting it in the Windows menu.
This is the menu bar icon for the HTML Assistant:

HTML Assistant will present the options you can use to create a particular HTML tag.
The topics that are supported by HTML Assistant are displayed in HTML Assistants Topics pop up menu and in the Assistant menu in PageSpinner's menu bar.

While you are working in the HTML Assistant Window you can switch between the different HTML topics by using the menu items.

Apply button

Some topics applies formatting, linkage or information tagging of the selected the text in your document. They will also let you edit the selected text inside the Text field in the HTML Assistant window. When this is the case the button in the lower right corner will be named Apply.

Insert button

Other topics the HTML Assistant Window just inserts a single tag in your current document. When this is the case the button in the lower right corner will be named Insert.

Tip

You can always use Balloon Help for any options in HTML Assistant if you need an explanation of a field or an option.